import React, { Component } from 'react'
/*
  使用React.createRef实现非受控组件步骤
  1、调用React.createRef方法，并且赋值给类的成员变量
   constructor(){
    super()
    this.usernameRef=React.createRef()
  }
  2、在指定表单控件上通过ref属性来引入这个成员变量
  <input type="text" id='username' ref={this.usernameRef}/>
*/
export default class NotControlledCom1 extends Component {
  constructor(){
    super()
    this.usernameRef=React.createRef()
    this.passwordRef=React.createRef()
    this.ballRef=React.createRef()
  }
  register=()=>{
    console.log(this.usernameRef.current.value);
  }

  changeBall=()=>{
    this.ballRef.current.style.backgroundColor="springgreen"
  }
  render() {
    return (
      <div>
        <h1>非受控</h1>
        <div>
            <label htmlFor="username">姓名：</label>
            <input type="text" id='username' ref={this.usernameRef}/>
         </div>
         <div>
            <label htmlFor="password">密码</label>
            <input type="text" id='password' ref={this.passwordRef}/>
         </div>
         <div>
          <button onClick={this.register}>注册</button>
         </div>

         <div style={{width:'100px',height:'100px',backgroundColor:'red',borderRadius:'50%'}} ref={this.ballRef} onClick={this.changeBall}></div>
      </div>
    )
  }
}
